import { ReadOutlined } from '@ant-design/icons-vue'
import { Anchor, AnchorLink } from 'ant-design-vue'
import form from 'ant-design-vue/lib/form'
import moment from 'moment'
import { defineComponent, ref } from 'vue'
import { Button, Table } from 'vxe-table'
import { divide } from 'xe-utils'

import { riverApi } from '@/apis'
import { type ProTableProps, type ProTableRef, ProTable } from '@/components'
import { TABLE_FORMAT, TABLE_ITEM_RENDER, TABLE_RENDERER } from '@/constants'
import router from '@/router'
import { optionsToMap } from '@/utils'

import { forceOptions } from '../constants'

export default defineComponent({
  name: 'RvReceiptDetailList',
  setup() {
    const tableRef = ref({} as ProTableRef)
    const matchNo = ref({} as any)
    const tableConfig = ref({
      fixedHeight: true,
      options: {
        border: true,
        align: 'center',
        formConfig: {
          items: [
            {
              title: '回单流水号',
              field: 'serialNo',
              itemRender: {
                name: TABLE_ITEM_RENDER.AInput,
                props: {
                  placeholder: '请输入',
                  allowClear: true
                }
              }
            },
            {
              title: '打款日期',
              field: 'timeRange',
              itemRender: {
                name: TABLE_RENDERER.FormItemDate,
                props: {
                  type: 'range',
                  placeholder: ['开始时间', '结束时间'],
                  valueFormat: 'YYYY-MM-DD',
                  keys: ['payStart', 'payEnd']
                }
              }
            },
            {
              title: '收款人开户行',
              field: 'receiveBank',
              itemRender: {
                name: TABLE_ITEM_RENDER.AInput,
                props: {
                  placeholder: '请输入',
                  allowClear: true
                }
              }
            },
            {
              title: '收款人名称',
              field: 'receiveName',
              itemRender: {
                name: TABLE_ITEM_RENDER.AInput,
                props: {
                  placeholder: '请输入',
                  allowClear: true
                }
              }
            },
            {
              title: '收款人账号',
              field: 'receiveAccount',
              itemRender: {
                name: TABLE_ITEM_RENDER.AInput,
                props: {
                  placeholder: '请输入',
                  allowClear: true
                }
              }
            },
            {
              title: '是否匹配成功',
              field: 'isMatch',
              itemRender: {
                name: TABLE_ITEM_RENDER.ASelect,
                options: forceOptions,
                props: {
                  placeholder: '全部',
                  allowClear: true
                }
              }
            },
            {
              itemRender: {
                name: TABLE_RENDERER.FormItemBtns
              }
            }
          ]
        },
        columnConfig: {
          minWidth: 150,
          resizable: true
        },
        columns: [
          {
            type: 'seq',
            width: 50,
            title: '序号'
          },
          {
            title: '回单流水号',
            field: 'serialNo',
            width: 200
          },
          {
            title: '是否匹配成功',
            field: 'matchSettleNo',
            slots: {
              default: 'matchSettle'
            }
            // formatter: ({ cellValue }) => {
            //   return optionsToMap(forceOptions)[cellValue]
            // }
          },
          {
            title: '金额',
            field: 'amount',
            width: 100,
            formatter: ({ cellValue }) => {
              return '￥' + cellValue
            }
          },
          {
            title: '打款日期',
            field: 'payDate'
          },
          {
            title: '回单验证码',
            field: 'verifyCode',
            width: 170
          },
          {
            title: '付款人名称',
            field: 'payName'
          },
          {
            title: '付款人开户行',
            field: 'payBank'
          },
          {
            title: '付款人账号',
            field: 'payAccount',
            width: 170
          },
          {
            title: '收款人名称',
            field: 'receiveName'
          },
          {
            title: '收款人开户行',
            field: 'receiveBank'
          },
          {
            title: '收款人账号',
            field: 'receiveAccount',
            width: 170
          },
          {
            title: '用途摘要',
            field: 'summary'
          },
          {
            title: '交易流水号',
            field: 'tradeNum'
          }
        ],
        pagerConfig: {
          pageSize: 15
        },
        proxyConfig: {
          form: true,
          props: {
            result: 'dataList',
            total: 'page.totalCount'
          },
          ajax: {
            query: async ({ page, form }) => {
              const data = await riverApi.getReceiptDetailList({
                pageParameter: {
                  pageSize: page.pageSize,
                  currentPage: page.currentPage
                },
                ...form
              })
              // const matchNo = data.find(
              //   item => item.id == form.receiveName
              // ).matchSettleNo
              // console.log(matchNo, 'matchNumber============')
              return data
            }
          }
        }
      }
    } as ProTableProps)

    function matchNumber(row) {
      router.push({
        name: 'RvWithdrawVerify',
        query: {
          id: row.id
        }
      })
    }

    return {
      tableRef,
      tableConfig,
      matchNumber
    }
  },
  render() {
    return (
      <div>
        <ProTable
          ref="tableRef"
          v-slots={{
            matchSettle: ({ row }) => (
              <span onClick={() => this.matchNumber(row)}>
                {row.matchSettleNo}
              </span>
            )
          }}
          {...this.tableConfig}
        />
      </div>
    )
  }
})
